<div class=grid>
    {{ .Data.Hole.Preamble }}
{{ with .Data.Hole.Variants }}
    <p>
        <b>Variants:</b>
        {{ $continuation := false }}
        {{ range . }}
            {{- if eq . $.Data.Hole }}{{ continue }}{{ end -}}
            {{- if $continuation }},{{ end }}
            <a href="{{ .ID }}">{{ .Name }}</a>
            {{- $continuation = true -}}
        {{ end }}
{{ end }}
{{ with .Data.Hole.Links }}
    <p>
        <b>External links:</b>
        {{ range $i, $l := . -}}
            {{ if ne $i 0 }},{{ end }}
            <a href="{{ .URL }}">{{ .Name }}</a>
        {{- end }}
{{ end }}
{{ if .Data.Hole.CaseFold }}
    <div class=info>The output will be checked case-insensitively.</div>
{{ end }}
{{ if .Data.Hole.MultisetItemDelimiter }}
    <div class=info>The output judge is order agnostic. The expected output shown is one of many valid outputs.</div>
{{ end }}
{{ with .Data.Hole.Data }}
    <div>
        <button class="btn orange" data-copy="{{ . }}">Copy as JSON</button>
        <span>Copied</span>
    </div>
{{ end }}
{{ with .Data.Hole.Answer }}
    <div>
        <button class="btn orange" data-copy="{{ . }}">Copy Answer</button>
        <span>Copied</span>
    </div>
{{ end }}
</div>
